<template lang="pug">
.dialog-wrap
    el-dialog(
        v-model="centerDialogVisible"
        :title="title" :width="width + 'px'"
        :modal="modal"
        dialogModel
        :align-center="true"
        destroy-on-close
        :close-on-click-modal="false"
        :draggable="draggable"
        @close="handleClose()"
        )
            .dialog-cont
                slot
            template(#footer v-if="footer")
                span.dialog-footer
                    el-button(@click="cancel('取消')") {{cancelText}}
                    el-button( type="primary" @click="confirm()") {{confirmText}}
</template>

<script setup>

import { ref } from 'vue'

const props = defineProps({
    draggable: { //可拖拽
        type: Boolean,
        default: true
    },
    modal: { //遮罩
        type: Boolean,
        default: true
    },
    footer: { //底部显示
        type: Boolean,
        default: true
    },
    conformShow: { //
        type: Boolean,
        default: true
    },
    confirmText: {
        type: String,
        default: '确定'
    },
    cancelShow: { //
        type: Boolean,
        default: true
    },
    cancelText: {
        type: String,
        default: '取消'
    },
    title: {
        type: String,
        default: ''
    },
    width: {
        type: String,
        default: '500'
    }
})
const centerDialogVisible = ref(false) //显示隐藏

const emit = defineEmits(['cancel', 'confirm', 'close'])
const cancel = (status) => { //取消操作，也称为关闭窗口操作。一般不会调
    centerDialogVisible.value = false //将窗口隐藏。
    emit('cancel')
}

const open = () => { //打开窗口操作。一般调用该函数后继续执行其他操作。
    centerDialogVisible.value = true
}
const close = () => { //打开窗口操作。一般调用该函数后继续执行其他操作。
    centerDialogVisible.value = false
}
const handleClose = () => {
    emit('close')
}
const confirm = () => { //确定操作。一般调用该函数后继续执行其他操作。  emits
    emit('confirm') //confirm事件传递confirm参数。  confirm事件不应返回错误。 如果
}
defineExpose({
    cancel,
    open,
    close
})
</script>

<style lang="less" scoped>
:deep(.el-dialog__header){
    padding-bottom: 0;
}
:deep(.el-dialog__body){
    padding: 0px calc(var(--el-dialog-padding-primary) + 5px) 0 !important;
}
.dialog-cont{
    padding-bottom: 10px;
}
:deep(.el-dialog){
    overflow: hidden;
}
</style>